<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册功能测试</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            padding: 20px; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container { 
            background: white; 
            padding: 40px; 
            border-radius: 15px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            max-width: 500px;
            width: 100%;
        }
        .form-group { 
            margin-bottom: 20px; 
        }
        .form-group label { 
            display: block; 
            margin-bottom: 8px; 
            font-weight: bold; 
            color: #333;
        }
        .form-group input, .form-group select { 
            width: 100%; 
            padding: 12px; 
            border: 2px solid #e1e5e9; 
            border-radius: 8px; 
            font-size: 16px;
            transition: border-color 0.3s ease;
        }
        .form-group input:focus, .form-group select:focus { 
            outline: none; 
            border-color: #ff6b6b; 
        }
        .btn { 
            width: 100%; 
            padding: 15px; 
            background: linear-gradient(135deg, #ff6b6b, #ee5a24); 
            color: white; 
            border: none; 
            border-radius: 8px; 
            font-size: 16px; 
            font-weight: bold; 
            cursor: pointer; 
            transition: transform 0.2s ease;
        }
        .btn:hover { 
            transform: translateY(-2px); 
        }
        .result { 
            margin-top: 20px; 
            padding: 15px; 
            border-radius: 8px; 
            font-weight: bold;
        }
        .success { 
            background: #d4edda; 
            color: #155724; 
            border: 1px solid #c3e6cb;
        }
        .error { 
            background: #f8d7da; 
            color: #721c24; 
            border: 1px solid #f5c6cb;
        }
        .info { 
            background: #d1ecf1; 
            color: #0c5460; 
            border: 1px solid #bee5eb;
        }
        h1 { 
            text-align: center; 
            color: #333; 
            margin-bottom: 30px; 
        }
        .user-type-selector {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .user-type-btn {
            flex: 1;
            padding: 12px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            text-align: center;
            font-weight: 600;
            color: #666;
            transition: all 0.3s ease;
        }
        .user-type-btn.active {
            border-color: #ff6b6b;
            background: #ff6b6b;
            color: white;
        }
        .user-type-btn:hover {
            border-color: #ff6b6b;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🧪 注册功能测试</h1>
        
        <form onsubmit="testRegister(event)">
            <div class="form-group">
                <label>用户类型</label>
                <div class="user-type-selector">
                    <div class="user-type-btn active" data-type="user" onclick="selectUserType('user')">
                        用户
                    </div>
                    <div class="user-type-btn" data-type="merchant" onclick="selectUserType('merchant')">
                        商家
                    </div>
                    <div class="user-type-btn" data-type="rider" onclick="selectUserType('rider')">
                        骑手
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label>用户名</label>
                <input type="text" id="username" value="testuser123" required>
            </div>
            
            <div class="form-group">
                <label>密码</label>
                <input type="password" id="password" value="123456" required>
            </div>
            
            <div class="form-group">
                <label>手机号</label>
                <input type="text" id="phone" value="13800138000" required>
            </div>
            
            <div class="form-group">
                <label>邮箱</label>
                <input type="email" id="email" value="test@example.com" required>
            </div>
            
            <button type="submit" class="btn">测试注册</button>
        </form>
        
        <div id="result"></div>
        
        <div style="margin-top: 30px; text-align: center;">
            <a href="simple-auth.html" style="color: #007bff; text-decoration: none; font-weight: bold;">
                🔙 返回登录页面
            </a>
        </div>
    </div>

    <script>
        let currentUserType = 'user';
        
        function selectUserType(type) {
            currentUserType = type;
            document.querySelectorAll('.user-type-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`[data-type="${type}"]`).classList.add('active');
            console.log('选择用户类型:', type);
        }
        
        function testRegister(event) {
            event.preventDefault();
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const phone = document.getElementById('phone').value;
            const email = document.getElementById('email').value;
            
            console.log('注册信息:', {
                username, password, phone, email, type: currentUserType
            });
            
            try {
                // 获取现有用户数据
                let users = JSON.parse(localStorage.getItem('users') || '[]');
                console.log('现有用户数量:', users.length);
                
                // 检查用户名是否已存在
                const existingUser = users.find(u => u.username === username);
                if (existingUser) {
                    document.getElementById('result').innerHTML = 
                        '<div class="error">❌ 用户名已存在！请使用其他用户名。</div>';
                    return;
                }
                
                // 创建新用户
                const newUser = {
                    id: users.length > 0 ? Math.max(...users.map(u => u.id)) + 1 : 1,
                    username: username,
                    password: password,
                    phone: phone,
                    email: email,
                    type: currentUserType,
                    name: username,
                    registerTime: new Date().toLocaleString()
                };
                
                console.log('新用户信息:', newUser);
                
                // 添加到用户列表
                users.push(newUser);
                localStorage.setItem('users', JSON.stringify(users));
                
                console.log('注册成功，用户已保存');
                
                document.getElementById('result').innerHTML = 
                    '<div class="success">✅ 注册成功！<br>用户名: ' + username + '<br>类型: ' + 
                    (currentUserType === 'user' ? '用户' : currentUserType === 'merchant' ? '商家' : '骑手') + 
                    '<br>ID: ' + newUser.id + '</div>';
                
                // 清空表单
                document.getElementById('username').value = '';
                document.getElementById('password').value = '';
                document.getElementById('phone').value = '';
                document.getElementById('email').value = '';
                
            } catch (error) {
                console.error('注册失败:', error);
                document.getElementById('result').innerHTML = 
                    '<div class="error">❌ 注册失败: ' + error.message + '</div>';
            }
        }
        
        // 页面加载时显示当前状态
        window.onload = function() {
            const users = JSON.parse(localStorage.getItem('users') || '[]');
            console.log('页面加载，当前用户数量:', users.length);
        };
    </script>
</body>
</html>